import { getScrollOffset } from './utils'

/**
 * @param {object/dom} popover  // 弹出框dom
 * @param {object/dom} content  // 触发事件的元素dom
 * @param {string} direction    // 设定的弹出框位置
 * @param {number} CONTANT      // popover与content间距
 * @returns {object} result     // result = { show: true, left: xxx, top: xxx, option: {} }
 */
export function getPopoverPosition(popover, content, direction, CONTANT) {
    let result = { show: true };
    getOptions(result, popover, content, direction, CONTANT);
    let { left, top } = getScrollOffset();
    result.left += left;
    result.top += top;
    return result;
}

const list = [
    'top-end',
    'left-end',
    'top-start',
    'right-end',
    'top-middle',
    'bottom-end',
    'left-start',
    'right-start',
    'left-middle',
    'right-middle',
    'bottom-start',
    'bottom-middle'
]

function getOptions(result, popover, content, direction, CONTANT) {
      let myList = list.concat(),
        client = popover.getBoundingClientRect();
        console.log(client)
        myList.splice(list.indexOf(direction), 1);
    getDirection(result, {
        myList,
        direction,
        CONTANT,
        top: client.top,
        left: client.left,
        popoverWidth: popover.offsetWidth,
        contentWidth: content.offsetWidth,
        popoverHeight: popover.offsetHeight,
        contentHeight: content.offsetHeight
    })
}

function getDirection(result, options) {
    let {
        top,
        left,
        CONTANT,
        direction,
        contentWidth,
        popoverWidth,
        popoverHeight,
        contentHeight
    } = options;
    result.options = options;
    let main = direction.split('-')[0],
        around = direction.split('-')[1];
    if (main === 'top' || main === 'bottom') {
        if (around === 'start') {
            result.left = left;
        } else if (around === 'end') {
            result.left = left + popoverWidth -contentWidth;
        } else if (around === 'middle') {
            result.left = left + popoverWidth/2 - contentWidth/2;
        }
        if (main === 'top') {
            result.top = top - contentHeight - CONTANT;
        } else {
            result.top = top + popoverHeight + CONTANT;
        }
    } else if (main === 'left' || main === 'right') {
        if (around === 'start') {
            result.top = top;
        } else if (around === 'end') {
            result.top = top + popoverHeight -contentHeight;
        } else if (around === 'middle') {
            console.log(top)
            console.log(popoverHeight)
            console.log(contentHeight)
            result.top = top + popoverHeight/2 - contentHeight/2;
        }
        if (main === 'left') {
            result.left = left - contentWidth - CONTANT;
        } else {
            result.left = left + popoverWidth + CONTANT;
        }
    }
    
    testDirection(result, options);
}

function testDirection(result, options) {
    let { left, top } = result,
        width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight;
    if (
        top < 0 ||
        left < 0 ||
        top + options.contentHeight > height ||
        left + options.contentWidth > width
    ) {
        if (options.myList.length) {
            options.direction = options.myList.shift();
            getDirection(result, options);
        } else {
            result.left = options.left;
            result.right = options.right;
        }
    } else {
        result.show = true
    }
}